{% extends 'layout.html' %}
{% load static %}
{% block title %}
    <title>数据统计</title>
{% endblock %}

{% block content %}

    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">月入职人数趋势</div>
        <div class="panel-body">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="line" style="width: 100%;height:260px;"></div>
        </div>
    </div>
    {#    bootstrap中栅格布局  一行划分成12列  #}
    <div class="row">
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading">月入职人数对比</div>
                <div class="panel-body">
                    <div id="bar" style="width: 100%;height:200px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading">部门人数</div>
                <div class="panel-body">
                    <div id="pie" style="width: 100%;height:200px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading">平均年龄</div>
                <div class="panel-body">
                    <div id="dashboard" style="width: 100%;height:200px;"></div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
    <script type="text/javascript">
        window.onload = function () {
            createLineChart()
            createBarChart()
            createPieChart()
            createDashboard()
        }

        function createLineChart() {
            var lineChart = echarts.init(document.getElementById('line'));
            // 图表配置项
            var option = {
                tooltip: {},
                legend: {
                    data: ['市场部', '教学部', '研发部']
                },
                xAxis: {
                    data: ['1', '2', '3', '4', '5', '6']
                },
                yAxis: {},
                series: [
                    {
                        name: '市场部',
                        type: 'line',
                        smooth: true,
                        data: [15, 20, 36, 10, 101, 203]
                    },
                    {
                        name: '教学部',
                        type: 'line',
                        smooth: true,
                        data: [25, 30, 36, 10, 210, 320]
                    },
                    {
                        name: '研发部',
                        type: 'line',
                        smooth: true,
                        data: [55, 10, 36, 10, 310, 520]
                    }
                ]
            };
            lineChart.setOption(option)
        }

        function createBarChart() {
            var barChart = echarts.init(document.getElementById('bar'));
            var option = {
                tooltip: {},
                legend: {
                    data: ['2023', '2024', '2025']
                },
                xAxis: {
                    data: ['1', '2', '3', '4', '5', '6']
                },
                yAxis: {},
                series: [
                    {
                        name: '2023',
                        type: 'bar',
                        data: [15, 20, 36, 10, 101, 203]
                    },
                    {
                        name: '2024',
                        type: 'bar',
                        data: [25, 30, 36, 10, 210, 320]
                    },
                    {
                        name: '2025',
                        type: 'bar',
                        data: [55, 10, 36, 10, 310, 520]
                    }
                ]
            };
            barChart.setOption(option);
        }

        function createPieChart() {
            var pieChart = echarts.init(document.getElementById('pie'));
            pieOption = {
                series: [
                    {
                        type: 'pie',
                        data: [],
                        roseType: 'area'
                    }
                ]
            };

            // 发送异步请求  获取每部门的人数
            $.ajax({
                url: '/app08/echarts/pie',
                type: 'GET',
                success: function (res) {
                    if (res.code == 200) {
                        for (const key in res.data) {
                            item = {
                                value: res.data[key],
                                name: key
                            }
                            pieOption.series[0].data.push(item)
                        }
                        pieChart.setOption(pieOption);
                    }
                }
            })


        }

        function createDashboard() {
            var dashboardChart = echarts.init(document.getElementById('dashboard'));
            option = {
                series: [
                    {
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 10
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 10,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 5,
                            color: '#999',
                            fontSize: 10
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 25,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 20,
                            offsetCenter: [0, '70%']
                        },
                        data: []
                    }
                ]
            };
            // 发送异步请求获取员工的平均年龄  35
            $.ajax({
                url: '/app08/echarts/age/avg',
                type: 'GET',
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == 200) {
                        option.series[0].data.push({value: res.avg_age})
                        dashboardChart.setOption(option);
                    }
                },
                error: function (res) {
                    console.log('请求失败!!!')
                }
            })
        }

    </script>

{% endblock %}